<template>
    <div>
        <h1 v-if="noticeList.length == 0">暂无消息</h1>
        <div v-for="(n, nIndex) in noticeList" :key="nIndex" style="margin: 20px;">
            <el-card shadow="hover">
                <el-row>
                    <el-col :span="16">
                        <div v-if="n.type == 'grant'">
                            {{ n.fromUsername }}
                            赠予您
                            <el-link type="primary" @click="goToEvent(n.eventId)">{{ n.eventTitle }}</el-link>
                            的
                            {{ n.ticketName }}
                            <br>
                            NFT编号：{{ n.LIFEId }}
                        </div>
                        <div v-if="n.type == 'acceptGranting'">
                            {{ n.fromUsername }}
                            接收了您赠予的
                            <el-link type="primary" @click="goToEvent(n.eventId)">{{ n.eventTitle }}</el-link>
                            的
                            {{ n.ticketName }}
                            <br>
                            NFT编号：{{ n.LIFEId }}
                        </div>
                        <div v-if="n.type == 'refuseGranting'">
                            {{ n.fromUsername }}
                            拒绝了您赠予的
                            <el-link type="primary" @click="goToEvent(n.eventId)">{{ n.eventTitle }}</el-link>
                            的
                            {{ n.ticketName }}
                            <br>
                            NFT编号：{{ n.LIFEId }}
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <el-button v-if="n.type == 'grant'" type="success" @click="accept(n)">接收</el-button>
                        <el-button v-if="n.type == 'grant'" type="danger" @click="refuse(n)">拒绝</el-button>
                        <el-button v-if="n.type == 'acceptGranting' || n.type == 'refuseGranting'" type="success" @click="confirm(n)">我知道了</el-button>
                    </el-col>                   
                </el-row>
            </el-card>
        </div>
    </div>
</template>

<script>
import {mapGetters} from 'vuex';
import common from "../../utils/common.vue";

export default {
    data() {
        return {
            noticeList: [],
            
        }
    },
    created() {
        this.getNotices();
    },
    computed: {
        ...mapGetters([
            'userId',
            'username',
            'address',
        ]),
    },
    methods: {
        getNotices() {
            this.api({
                url:"/ticketing/getNotices",
                method: "post",
                data: {userId: this.userId}
            }).then(data => {
                this.noticeList = data.info;
            }).catch((err) => {
                console.log('err:',err)
                this.$message.error("获取消息失败")
            })
        },
        goToEvent(eventId) {
            this.$router.push({
                name: 'event',
                params: {id: eventId}
            })
        },
        accept(notice) {
            this.api({
                url:"/ticketing/acceptTicket",
                method: "post",
                data: {
                    from: this.userId,
                    to: notice.from,
                    LIFEId: notice.LIFEId,
                    fromUsername: this.username
                }
            }).then(data => {
                if (data.code == common.codeFromBackEnd.SUCCESS_CODE) {
                    this.$message({
                        message: "您已成功接收",
                        type: 'success'
                    })               
                }
                if (data.code == common.codeFromBackEnd.ERROR_CODE) {
                    this.$message({
                        message: data.msg,
                        type: 'error'
                    })
                }   
                this.getNotices();
            }).catch((err) => {
                console.log('err:',err)
                this.$message.error("接收失败")
            })        
        },
        refuse(notice) {
            this.api({
                url:"/ticketing/refuseTicket",
                method: "post",
                data: {
                    from: this.userId,
                    to: notice.from,
                    LIFEId: notice.LIFEId,
                    fromUsername: this.username
                }
            }).then(data => {
                if (data.code == common.codeFromBackEnd.SUCCESS_CODE) {
                    this.$message({
                        message: "您已拒绝",
                        type: 'success'
                    })               
                }
                if (data.code == common.codeFromBackEnd.ERROR_CODE) {
                    this.$message({
                        message: data.msg,
                        type: 'error'
                    })
                }   
                this.getNotices();
            }).catch((err) => {
                console.log('err:',err)
                this.$message.error("拒绝失败")
            })        
        },
        confirm(notice) {
            this.api({
                url:"/ticketing/deleteNotice",
                method: "post",
                data: {
                    LIFEId: notice.LIFEId,
                }
            }).then(data => {
                this.getNotices();
            })
        },
    },
}
</script>

<style scoped>
</style>